<template>
	<view>
		<view class="content">
		       <view class="heart">
		           <span></span>
		           <span></span>
		           <span></span>
		       </view>
		       <view class="shadow">
		       </view>
		   </view>
	</view>
</template>

<script>
	export default {
		name:"loading",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.content{
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}
	
	.heart{
	    animation: heart 2.3s cubic-bezier(0.75,0,0.5,1) infinite;
	}
	@keyframes heart{
	    50%{
	        transform: rotate(360deg);
	    }
	    100%{
	        transform: rotate(720deg);
	    }
	}
	
	.heart span{
	    height: 64px;
	    width: 64px;
	    display: block;
	    position: absolute;
	    background: #3fc1f2;
	    border: 1px solid #3fc1f2;
	    border-radius: 100%;
	}
	
	.heart span:nth-child(1){
	    transform: translate(-28px,-28px);
	    animation: heart1 2.3s cubic-bezier(0.75,0,0.5,1) infinite;
	}
	@keyframes heart1{
	    60%{
	        transform: scale(0.4);
	    }
	}
	
	.heart span:nth-child(2){
	    transform: translate(28px,-28px);
	    animation: heart2 2.3s cubic-bezier(0.75,0,0.5,1);
	}
	@keyframes heart2{
	    40%{
	        transform: scale(0.4);
	    }
	}
	
	.heart span:nth-child(3){
	    position: relative;
	    /* background-color: red; */
	    border-radius: 0;
	    transform:scale(0.98) rotate(-45deg);
	    animation: heart3 2.3s cubic-bezier(0.75,0,0.5,1) infinite;
	}
	@keyframes heart3{
	    50%{
	        border-radius: 100%;
	        transform: scale(0.5) rotate(-45deg);
	    }
	    100%{
	        transform:scale(0.98) rotate(-45deg);
	    }
	}
	
	.content .shadow{
	 position: relative;
	 display: block;
	 height: 16px;
	 width: 64px;
	 background: #d9d9d9;
	 border: 1px solid #d9d9d9;
	 border-radius: 50%;
	 top: 50px;
	 animation: shadow 2.3s cubic-bezier(0.75,0,0.5,1) infinite;
	}
	
	@keyframes shadow{
	    50%{
	        background-color: #f2f2f2;
	        transform: scale(0.5);
	    }
	    
	}
</style>
